<template>
  <div class="app-container calendar-list-container">
    <el-form :model="q" ref="q" label-width="100px" class="el-form filter-container">
      <el-row>
        <el-col :span="8">
          <el-form-item label="网组类型" prop="netType">
            <el-select v-model="q.netType" clearable placeholder="全部" >
              <el-option label="A网" :value="0"></el-option>
              <el-option label="B网" :value="1"></el-option>
              <el-option label="C网" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐是否已满" prop="isFull">
            <el-select v-model="q.isFull" clearable placeholder="全部" >
              <el-option label="已满3个" :value="true"></el-option>
              <el-option label="未满3个" :value="false"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" class="cx-btnbox">
          <el-button round class="r" type="primary" @click="resrtFrom ">重置</el-button>
          <el-button round class="r" type="primary" @click="getList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="list" border fit highlight-current-row style="width: 100%" class="body-w">
      <el-table-column label="点位ID" prop="id" width="100" ></el-table-column>
      <el-table-column label="点位类型" prop="netType" align="center">
        <template slot-scope="scope" >
          <el-tag v-if="scope.row.netType === 0">A网</el-tag>
          <el-tag v-else-if="scope.row.netType === 1" type="success">B网</el-tag>
          <el-tag v-else type="warning">C网</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="点位来源" prop="pointType" align="center">
        <template slot-scope="scope" >
          <el-tag v-if="scope.row.pointType === 0">注册点位</el-tag>
          <el-tag v-else type="success">奖励点位</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="锁定余额" prop="lockedBalance"></el-table-column>
      <el-table-column label="已推荐点位数" prop="nodeCount" align="center"></el-table-column>
      <el-table-column label="注册时间" prop="creationTime" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.creationTime | moment}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="220px" >
        <template slot-scope="scope">
          <el-button v-if="scope.row.netType === 0" round type="text" @click="handleAdd(scope.row)" size="small" :disabled="scope.row.nodeCount >= 3">推荐注册</el-button>
          <el-button round type="text" @click="handleDetail(scope.row)" size="small">点位收支明细</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="推荐注册" :visible.sync="dialogFormVisible">
      <edit-user :currentNetPointId="selectedNetPointId" :accountType="1" @createSuccessed="createSuccessed"></edit-user>
    </el-dialog>
    <el-dialog title="点位收支明细" :visible.sync="dialogFinancialVisible">
      <net-point-financial-list :netPointId="financialNetPointId"></net-point-financial-list>
    </el-dialog>
  </div>
</template>
<script>
import editUser from '@/views/users/components/editUser'
import netPointFinancialList from './netPointFinancialList'
import { GetMyNetPoints } from '@/api/netPoint'

export default {
  name: 'netPointList',
  components: {
    editUser,
    netPointFinancialList
  },
  data() {
    return {
      list: [],
      listLoading: false,
      dialogFormVisible: false,
      dialogFinancialVisible: false,
      selectedNetPointId: 0,
      financialNetPointId: 0,
      q: {
        isFull: '',
        netType: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    resrtFrom() {
      this.$refs['q'].resetFields()
    },
    getList() {
      var _this = this
      _this.listLoading = true
      GetMyNetPoints().then(result => {
        _this.list = result.data
        _this.listLoading = false
      })
    },
    createSuccessed() {
      this.dialogFormVisible = false
      this.getList()
    },
    handleAdd(row) {
      this.selectedNetPointId = row.id
      this.dialogFormVisible = true
    },
    handleDetail(row) {
      this.financialNetPointId = row.id
      this.dialogFinancialVisible = true
    }
  }
}
</script>
